<template>
	<view class="content">

		<div class="part top-part">
			<!-- 牌阵 -->
			<div class="title">{{ formItem.title || '未命名' }}</div>
			<tarot-form class="tarot-form" :type="formItem.type"></tarot-form>
		</div>

		<div class="part center-part">
			<!-- 描述 -->
			<div class="desc">{{ formDesc }}</div>
		</div>

		<div class="part bottom-part">
			<!-- 洗牌 -->
			<image class="start-btn-bg btn-bg-animation" src="@/static/images/icon-bg.png"></image>
			<div class="start-btn" @click="clickAction">洗牌</div>
		</div>
	</view>
</template>

<script>
	import TarotForm from '@/pages/tarotForm.vue'
	import tarotData from '@/pages/tarotData.js'
	export default {
		components: {
			TarotForm,
		},
		onLoad: function(option) {
			const params = JSON.parse(decodeURIComponent(option.params));
			// console.log("params: ", params);
			this.formItem = params;

			this.formDesc = tarotData.formDesc[params.title] || "无描述";
		},
		data() {
			return {
				formItem: null,
				formDesc: "",
			}
		},
		created() {},
		mounted() {},
		methods: {
			clickAction() {
				const params = encodeURIComponent(JSON.stringify(this.formItem));
				uni.navigateTo({url: '/pageDetail/detail/select/index?params=' + params});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #20254c;
	}

	
	.part {
		width: 100%;
		flex: 1;
		color: #fff;
	}

	.top-part {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 4 !important;
		
		.title {
			color: #ccbd82;
			font-size: 40rpx;
			font-weight: bolder;
		}
		.tarot-form {
			width: 50vw;
			height: 50vw;
			padding: 40rpx;
			// background-color: #fff;
			border: 1px dashed #000;
			border-radius: 20rpx;
		}
	}

	.center-part {
		display: flex;
		flex-direction: row;
		justify-content: center;
		// align-items: center;
		flex: 4 !important;
		overflow-y: scroll;
		
		.desc {
			width: 80%;
			color: #ccbd82;
			white-space: pre-line;
		}
	}

	.bottom-part {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 2 !important;

		.btn-bg-animation {
			-webkit-animation: rotateAnimation 5s linear infinite;
			animation: rotateAnimation 5s linear infinite;
		}

		@keyframes rotateAnimation {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.start-btn-bg {
			width: 240rpx;
			height: 240rpx;
		}

		.start-btn {
			position: absolute;
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
			background-color: #e5d367;
			color: #000;
			text-align: center;
			line-height: 150rpx;
			font-size: 40rpx;
			font-weight: lighter;
		}
	}
</style>